<template>
  <div style="width: 100px">
    <NPopselect
      :options="options"
      placeholder=""
      v-model:value="localeLabel"
      @update:value="handelChange"
      trigger="click"
    >
      <n-space justify="space-between" style="width: 80px">
        <p>{{ localeLabel }}</p>
        <n-icon>
          <ChevronDown />
        </n-icon>
      </n-space>
    </NPopselect>
  </div>
</template>
<script lang="ts" setup>
import { onBeforeMount, ref } from 'vue'
import { NSwitch, NIcon, NSpace, NPopselect } from 'naive-ui'
import { ChevronDown } from '@vicons/ionicons5'
import storage from '@/utils/storage'
import LocaleUtils from '@/utils/LocaleUtils'
import useLocaleStore from '@/stores/locale'
const locale = useLocaleStore()
const LocaleDir = ref(LocaleUtils.getLocale())
locale.$subscribe(() => {
//   LocaleDir.value(LocaleUtils.getLocale())
})
const localeLabel = ref('zh-cn')
const options = ref<{ label: string; value: string }[]>([])
onBeforeMount(() => {
  const themeList = ['zh-cn', 'zh-tw', 'en-us', 'en-gb', 'jpan']
  themeList.forEach((item) => {
    options.value.push({
      label: item,
      value: item
    })
  })
})
const handelChange = () => {
  LocaleUtils.setLocale(localeLabel.value)
}
onBeforeMount(() => {
  const _localeLabel = storage.get('locale')
  if (_localeLabel) {
    LocaleUtils.setLocale(_localeLabel)
    localeLabel.value = _localeLabel
  }
})
</script>
<style scoped></style>
